 /*
 * @name: 新建/编辑店铺公告
 * @Author: along
 * @Date: 2020-09-14
 * @Last Modified by: along
 * @Last Modified time: 2020-09-14
 */
<template>
    <div class="container workTaskEdit">
        <div :style="{flex: 1, background: '#fff'}">
            <div class="title">
                店铺公告
            </div>
            <div class="wrap">
                <el-form
                    v-if="init"
                    ref="ruleForm"
                    :model="formData"
                    label-position="left"
                    status-icon
                    :rules="rules"
                    label-width="80px"
                    :disabled="false"
                    style="margin: 30px 0 0 30px"
                >
                    <el-form-item
                        label="公告目标:"
                        prop="scope"
                    >
                        <el-checkbox-group
                            v-model="formData.scope"
                            :disabled="check"
                        >
                            <el-checkbox :label="1">商家后台</el-checkbox>
                            <el-checkbox :label="2">学生后台</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item
                        label="公告标题:"
                        prop="notice_title"
                        :style="{pointerEvents: check ? 'none' : ''}"
                    >
                        <div id="width">
                            <el-input
                                v-model="formData.notice_title"
                                size="small"
                                placeholder="请输入公告标题"
                                maxlength="100"
                                show-word-limit
                                style="width:100%;"
                            />
                        </div>
                    </el-form-item>
                    <el-form-item
                        prop="notice_type"
                        label="公告类型:"
                        :style="{pointerEvents: check ? 'none' : ''}"
                    >
                        <el-select
                            v-model="formData.notice_type"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            style="width:100%;"
                        >
                            <el-option
                                v-for="item in noticeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        prop="notice_intro"
                        label="公告内容:"
                        :style="{pointerEvents: check ? 'none' : ''}"
                    >
                        <div :style="{width: '100%'}">
                            <ueditor
                                v-if="init"
                                ref="ueditor"
                                :default-value="formData.notice_intro"
                            />
                        </div>
                    </el-form-item>
                </el-form>
                <div class="zd-foot">
                    <el-button
                        slot="reference"
                        type="default"
                        style="width:100px;marginLeft:110px"
                        size="small"
                        v-if="check"
                        @click="()=>{
                            this.$router.push({
                                name: 'shopNotice'
                            })
                        }"
                    >
                        返回
                    </el-button>
                    <el-button
                        slot="reference"
                        type="default"
                        style="width:100px;marginLeft:110px"
                        size="small"
                        v-if="!check"
                        @click="fnBack()"
                    >
                        取消
                    </el-button>
                    <el-button
                        slot="reference"
                        type="default"
                        style="width:100px;margin:0 50px 0 50px"
                        size="small"
                        @click="fnFormPreview()"
                    >
                        预览
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        style="width:100px;"
                        v-if="!check"
                        @click="fnSubmit('ruleForm')"
                    >
                        保存
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import ueditor from '@/components/common/ueditor.vue';
export default {
    mixins: [back],
    components: {
        ueditor
    },
    data () {
        return {
            formData: {
                notice_title: '',
                notice_type: '',
                notice_intro: '',
                scope: [1, 2]
            },
            noticeList: [{value: '', label: '全部'},{value: 'system', label: '系统公告'},{value: 'product', label: '产品公告'}],
            rules: {
                notice_title: [
                    { required: true, message: '请填写公告标题', trigger: 'change' }
                ],
                notice_type: [
                    { required: true, message: '请选择公告类型', trigger: 'change' }
                ],
                notice_intro: [
                    { required: true, message: '请填写公告内容', trigger: 'change' }
                ],
                scope: [
                    { required: true, message: '请勾选公告目标', trigger: 'change' }
                ]
            },
            check: false,//是否为查看状态
            init: false,//页面加载开关
            id: '',//公告编号
            title: '',//页面标题
            authResult: {},
        };
    },
    filters: {},
    computed: {},
    watch: {},
    created () {
        let query = this.$route.query;

        if(query.id) {
            this.id = query.id;
            this.getData();
            this.check = query.check ? true : false;
        } else {
            this.init = true;
        }

        this.title = query.id ? '编辑公告': '新建公告';
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: this.title}]);
        this.authResult = this.$route.meta.authResult;
    },
    methods: {
        /**
         * 获取公告数据
         */
        getData () {
            this.$post('/student/hire_announce%5Cget', {
                announce_no: this.id
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        notice_title: resp.data.announce_title,
                        notice_type: resp.data.announce_type,
                        notice_intro: '',
                        scope: resp.data.scope
                    };
                    this.$set(this.formData, 'notice_intro', resp.data.announce_content);
                    this.init = true;
                } else {
                    this.init = true;
                    this.$notify({
                        title: '警告',
                        message: resp.msg || '数据获取失败',
                        type: 'warning'
                    });
                }
            });

        },

        /**
         * @description 保存公告
         */
        fnSubmit (formName) {
            this.formData.notice_intro = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.formData,'formData');

                    let data = {
                        announce_no: '',
                        announce_title: this.formData.notice_title,
                        announce_type: this.formData.notice_type,
                        announce_content: this.formData.notice_intro,
                        scope: this.formData.scope.join()
                    };

                    if (!this.id) {
                        this.$post('/student/hire_announce%5Csave', data ,resp => {
                            if (resp.code == 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'shopNotice'
                                    });
                                },500);
                            } else if (resp.code == 0) {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    } else {
                        data.announce_no = this.id;
                        this.$post('/student/hire_announce%5Csave', data ,resp=> {
                            if (resp.code == 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'shopNotice'
                                    });
                                },500);
                            } else if (resp.code == 0) {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },

        /**
         * @description 取消
         */
        fnBack () {
            this.$confirm('取消后你修改的内容将不会进行保存,是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'shopNotice'
                });
            });
        },

        /**
         * @description 预览公告内容
         */
        fnFormPreview () {
            this.formData.notice_intro = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
            if(!this.formData.notice_title) {
                this.$notify({
                    title: '提示',
                    message: '公告标题不可以为空',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            if(!this.formData.notice_intro) {
                this.$notify({
                    title: '提示',
                    message: '公告内容不可以为空',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$store.commit('config/SET_JSON', JSON.stringify({
                title: this.formData.notice_title,
                content: this.formData.notice_intro
            }));

            let routeData = this.$router.resolve({
                name: 'shopNoticeLook'
            });

            window.open(routeData.href, '_blank');
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: calc(100% - 24px);
    margin: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    .wrap {
        width: calc(100% - 48px);
        background:rgba(251,251,251,1);
        border-radius:2px;
        border:1px solid rgba(238,238,238,1);
        box-sizing: border-box;
        padding: 12px 24px 18px 24px;
        margin-left: 24px;
    }
    .title {
        width: 100%;
        height: 68px;
        display: flex;
        align-items: center;
        position: relative;
        color: #333333;
        font-size: 20px;
        font-weight: 500;
        padding-left: 35px;
        box-sizing: border-box;
        border-bottom: 1px #EEEEEE solid;
        margin-bottom: 24px;
        &::before {
            content: '';
            position: absolute;
            left: 26px;
            top: 24px;
            width:3px;
            height:20px;
            background:rgba(24,144,255,1);
        }
    }
    .el-no-button {
        border: none;
        font-size: 12px;
        line-height: 20px;
        height: 36px;
        padding: 0;
        &:hover {
            background-color: transparent;
        }
    }
}
// provide样式
.container-form-provide {
    padding: 0px 18px;
    color: #666666;
    font-size: 12px;
    line-height: 20px;
    span {
        color: #333333;
        font-weight: 500;
    }
}
.zd-foot {
    height: 32px;
    width: 100%;
    display: flex;
    margin-top: 50px;
    margin-bottom: 30px;
}
</style>
<style lang="less">
    .workTaskEdit{
        .el-popover__title {
            text-align: center;
        }
        .edui-editor, #edui1_iframeholder{
            width: 100% !important;
        }
        .edui-editor {
            width: 100% !important;
        }
    }
</style>
